<template>
  <!-- 共现网络图 -->
  <div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt, toolboxFullScreen } from "@/utils/utils";
import { mockGraph }  from './mock/graph.js'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String,
    },
    chartData: {},
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
    };
  },
  computed: {
    ...mapState(["curChartConfig"]),
  },

  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let colors = [];
        this.curChartConfig.colors.forEach((v) => {
          colors.push(v.color);
        });
        this.colors = [...colors, ...Ecolors.color];
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init();
      }
    },

    init() {
      let nodes = [];
      this.chartData.result.nodes.map(item => {
        nodes.push({
          ...item,
          id:item.key,
          value:item.doc_count,
          name:item.key,
          symbolSize:item.doc_count
        })
      })
      let links = this.chartData.result.links;
      let graph = {
        categories:[],
        links: links,
        nodes: nodes,
      };
      let option = {
        tooltip: {},
        legend: [
          {
            data: graph.categories.map(function (a) {
              return a.name;
            }),
          },
        ],
        series: [
          {
            name: "graph",
            type: "graph",
            layout: "force", // 采用引导力布局
            force: {
              repulsion: [10, 200], // 斥力范围，值越大，斥力越大
              gravity: 0.05, // 节点受到的向中心的引力因子，该值越大节点越往中心点靠拢
              edgeLength: [10, 200], // 两个节点之间距离，受repulsion影响；数组表达边长范围，值越小则长度越长
              layoutAnimation: false, // 是否显示布局动画（节点数据多不建议显示）
            },
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
            },
            labelLayout: {
              hideOverlap: true,
            },
            scaleLimit: {
              min: 0.4,
              max: 2,
            },
            lineStyle: {
              color: "source",
              curveness: 0.3,
            },
          },
        ],
      };
      this.chart.clear();
      this.chart.setOption(option, true);

      this.$emit("chartDom", this.chart);

      // 后台报告下载
      this.chart.on("finished", () => {
        let tempId = this.$route.query.tempId;
        if (tempId) {
          this.getEchartImg(this.chart.getDataURL());
        }
      });
    },
    getEchartImg(base) {
      window.echartImg = base;
    },
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function () {
        this.getCurChartConfig();
      },
    },
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear();
      } else {
        this.getCurChartConfig();
      }
    },
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId));
    this.getCurChartConfig();
  },
  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>